import { trendAlarm } from "@/api/modules/iot/alarm";
import { dayjs } from "element-plus";
import RankingDevice from "./rankingDevice";
import level1 from "@/assets/images/level1.png";
import level2 from "@/assets/images/level2.png";
import level3 from "@/assets/images/level3.png";
import level4 from "@/assets/images/level4.png";
export default defineComponent({
	setup() {
		onMounted(() => {
			init();
		});
		const init = async () => {
			let { result } = await trendAlarm({
				type: 2,
				timeStamp: `${dayjs().format("YYYY-MM-DD 00:00:00")}~${dayjs().format("YYYY-MM-DD 23:59:59")}`
			});
			let data: any = result || {};
			state.alarm = data[dayjs().format("YYYY-MM-DD")];
		};
		const state = reactive({
			alarm: {
				level1: 0,
				level2: 0,
				level3: 0,
				level4: 0
			}
		});
		return () => {
			return (
				<div class="real-alarm-page ">
					<div class="bg-white p-6">
						<div class="page-title flex">
							<div class="title-left-line"></div>今日告警概览
						</div>

						<div class="top alarm-level grid grid-cols-4 gap-6 pt-4">
							<div class="card-bg h-20 flex items-center p-4">
								<div class="flex flex-1">
									<el-image src={level1} class="left-icon mr-4"></el-image>
									<div class="text-sm">一般告警</div>
								</div>
								<div class="text-xl font-bold flex-1 text-center">{state.alarm.level1}</div>
							</div>
							<div class="card-bg h-20 flex items-center p-4">
								<div class="flex flex-1">
									<el-image src={level2} class="left-icon mr-4"></el-image>
									<div class="text-sm">重要告警</div>
								</div>
								<div class="text-xl font-bold flex-1 text-center">{state.alarm.level2}</div>
							</div>
							<div class="card-bg h-20 flex items-center p-4">
								<div class="flex flex-1">
									<el-image src={level3} class="left-icon mr-4"></el-image>
									<div class="text-sm">严重告警</div>
								</div>
								<div class="text-xl font-bold flex-1 text-center">{state.alarm.level3}</div>
							</div>
							<div class="card-bg h-20 flex items-center p-4">
								<div class="flex flex-1">
									<el-image src={level4} class="left-icon mr-4"></el-image>
									<div class="text-sm">危险告警</div>
								</div>
								<div class="text-xl font-bold flex-1 text-center">{state.alarm.level4}</div>
							</div>
						</div>
					</div>
					<div class="mt-4 ignore-search-split">
						<RankingDevice />
					</div>
				</div>
			);
		};
	}
});
